<template>
  <div class="module-wrap border-t border-[#ffffff1a]">
    <div class="title-wrap config title-wrap_3">
      <span class="title">快捷入口</span>
      <div class="option cursor-pointer" @click="onConfig">
        <span>配置</span>
        <SettingOutlined style="margin-left: 5px" />
      </div>
    </div>
    <ul>
      <li
        class="link-wrap cursor-pointer"
        v-for="item in linkList"
        :key="item.menuId"
        @click="onPush(item)"
      >
        <span>{{ item.menuName }}</span>
        <RightOutlined />
      </li>
    </ul>
  </div>

  <FormModal></FormModal>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import '@ant-design/icons-vue';
import { RightOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { useFormModal } from '@boeyo/hooks';
import { useRouter } from 'vue-router';
import { configMenu, menuList, quickMenu } from '../api';

const linkList = ref([]);

const refresh = async () => {
  const res = await quickMenu();
  linkList.value = res.data || [];
};
refresh();

const { FormModal, open } = useFormModal({});

const onConfig = async () => {
  const res = await menuList();
  console.log(res);
  open({
    title: '快捷菜单配置',
    defaultValue: {
      ids: linkList.value.map((item) => item.menuId),
    },
    items: [
      {
        valueType: 'select',
        title: '菜单名称',
        dataIndex: 'ids',
        fieldProps(state) {
          return {
            maxTagCount: 3,
            mode: 'multiple',
            options: res.data.map((item) => {
              return {
                label: item.menuName,
                value: item.menuId,
                disabled:
                  state.ids?.length >= 4 && !state.ids.includes(item.menuId),
              };
            }),
          };
        },
      },
    ],
    request: async ({ ids }: any) => {
      await configMenu(ids);
      refresh();
    },
  });
};

const router = useRouter();

const onPush = (item) => {
  router.push(`/${item.path}`);
};
</script>
